<template>
  <van-nav-bar left-text="" left-arrow @click-left="goBack">
    <template #right>
      <van-icon name="search" size="18" @click="isShow = !isShow" />
    </template>
    <template #title>
      <span v-if="isShow">全部分类</span>
      <van-field
        v-else
        v-model="keywords"
        label=""
        placeholder="请输入产品名称"
        @change="getProductData"
      />
    </template>
  </van-nav-bar>
  <van-dropdown-menu swipe-threshold="4">
    <van-dropdown-item v-model="typeid" :options="typelist" @change="getProductData"/>
    <van-dropdown-item v-model="flag" :options="flaglist" @change="getProductData"/>
    <van-dropdown-item v-model="order" :options="orderlist" @change="getProductData"/>
    <van-dropdown-item v-model="sort" :options="sortlist" @change="getProductData"/>
  </van-dropdown-menu>
  <div class="mainWarp" style="background: #f3f3f3">
    <ul class="proul">
      <li v-for="item in productlist" :key="item.id">
        <router-link :to="{path:'/product/detail', query:{pid: item.id}}" id="conli">
          <img :src="item.thumbs_text" />
        </router-link>
        <router-link :to="{path:'/product/detail', query:{pid: item.id}}">
          <p class="tit">{{ item.name }}</p>
        </router-link>
        <div class="price">
          <p>￥{{ item.price }}/{{item.unit.name}}</p>
        </div>
      </li>
    </ul>
  </div>
  <div class="clear"></div>
  <div class="h54"></div>
  <div class="clear"></div>
  <Footer />
</template>

<script setup>
import Footer from '@/components/common/footer.vue'
import { ref } from 'vue'
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.go(-1) }

const isShow = ref(true)
const keywords = ref('')

const productlist = ref([])
const typelist = ref([])
const typeid = ref(0);
const flag = ref('');
const order = ref('createtime');
const sort = ref('desc');
// 商品分类
const flaglist = [
  { text: '全部商品', value: '' },
  { text: '新品', value: '1' },
  { text: '热销', value: '2' },
  { text: '推荐', value: '3' },
];
// 按上架时间
const orderlist = [
  { text: '按上架时间', value: 'createtime' },
  { text: '按价格', value: 'price' },
  { text: '按库存', value: 'stock' },
];
// 按排序
const sortlist = [
  { text: '降序', value: 'desc' },
  { text: '升序', value: 'asc' },
];


// 挂载前加载出数据
onBeforeMount(() => {
  getProductData()
  getProductType()
})
// 商品列表
const getProductData = async () => {
  let data ={
        keywords: keywords.value,
        typeid: typeid.value,
        flag: flag.value,
        order: order.value,
        sort: sort.value
    }
  let result = await Api.ProductIndex(data)
  if (result.code == 1) {
    productlist.value = result.data;
    console.log(productlist.value);
  }
}
// 商品分类列表
const getProductType = async () => {
  let result = await Api.ProductType()
  if (result.code == 1) {
    typelist.value = result.data;
    typelist.value.unshift({
            text: '全部分类', value: 0
        })
  }
}
</script>


<style>
@import url("/assets/css/typelist.css");
#conli {
  height: 15vh;
  overflow: hidden;
}
#conli img {
  height: 15vh;
}
</style>